<template>
	<view>
		<u-navbar :title="typeTxt + '搜索'" :background="navbarBg" title-color="#fff" :border-bottom="false" back-icon-color="#fff"></u-navbar>
		<view class="search-box">
			<u-search placeholder="请输入搜索关键字" shape="square" :animation="true" v-model="keyword" :action-style="actionStyle" bg-color="#fff" @custom="search"></u-search>
		</view>
		<mescroll-uni ref="mescrollRef" :top="top" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="list">
				<view class="card" v-for="(item,index) in dataList" :key="index" @click="linkToDetail(item.id,item.status)">
					<view class="card-hd">{{item.title}}</view>
					<view class="card-bd">
						<view class="item">
							<span class="item-t">供应商单位：</span>
							<span class="item-v u-line-1">{{item.supplierName || '待选择'}}</span>
						</view>
						<view class="item">
							<span class="item-t">要求供应时间：</span>
							<span class="item-v u-line-1">{{item.supplyTime || '待选择'}}</span>
						</view>
						<view class="item">
							<span class="item-t">卸货位置：</span>
							<span class="item-v u-line-1">{{item.locationName}}</span>
						</view>
						<view class="item">
							<span class="item-t">预计所需算量：</span>
							<span class="item-v u-line-1">{{item.totalBudget}}t</span>
						</view>
					</view>
					<view class="card-fd">
						<span>{{item.createTime}}</span>
					</view>
					<view  class="status primary">{{item.status | statusTxt}}</view>
				</view>	
				
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import config from "@/common/config.js"
	export default{
		mixins:[MescrollMixin],
		data(){
			return {
				navbarBg:{'background':'rgba(0, 130, 255, 1)'},
				type:"project",
				top:0,
				keyword:'',
				actionStyle:{'color':'#fff'},
				dataList:[],
				downOption:{
					use:false
				},
				upOption:{
					auto:false
				}
			}
		},
		filters:{
			statusTxt(v){
				return config.orderStatus[v]
			}
		},
		computed:{
			typeTxt(){
				switch(this.type){
					case 'project':
						return '计划'
						break;
					case 'order':
						return '订单'
						break;
					case 'accept':
						return '结算'
						break;
					default:
						return ''
				}
			}
		},
		onLoad(options){
			this.top = uni.getSystemInfoSync().statusBarHeight + uni.upx2px(224) + 'px' 
			this.type = options.type
		},
		methods:{
			async upCallback(page) {
				let res = ''
				if(this.type == 'project'){
					res = await this.$u.api.getPlanList({current:page.num,size:page.size,keywords:this.keywords})
				}
				if(this.type == 'order'){
					res = await this.$u.api.getOrderList({current:page.num,size:page.size,keywords:this.keywords})
				}
				let curPageData = res.data.records;
				let curPageLen = curPageData.length; 
				let totalSize = res.data.total;
				if(page.num == 1) this.dataList = [];
				this.dataList = this.dataList.concat(curPageData);
				this.mescroll.endBySize(curPageLen, totalSize); 
			},
			search(){
				this.dataList = []
				this.mescroll.resetUpScroll()
			},
			linkToDetail(id,status){
				uni.navigateTo({
					url:`/pages/order/detail?id=${id}`
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-box{
		position: fixed;
		left: 0;
		right: 0;
		z-index: 99;
		padding: 32rpx 30rpx;
		background: linear-gradient(180deg, #0082FF 0%, rgba(0, 130, 255, 0.9) 36%, rgba(0, 130, 255, 0.57) 74%, rgba(0, 130, 255, 0) 100%);
	}
	.list{
		padding: 0 30rpx;
		.card{
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			position: relative;
			.card-hd{
				font-size: 34rpx;
				color:#28282C;
				font-weight: 600;
				margin-top: 5rpx;
				padding: 30rpx 24rpx 24rpx;
			}
			.card-bd{
				padding: 0 24rpx 8rpx;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16rpx;
					font-size: 28rpx;
					.item-t{
						color: #798188;
					}
					.item-v{
						color:#333;
						max-width: 400rpx;
					}
				}
			}
			.card-fd{
				display: flex;
				align-items: center;
				height: 80rpx;
				border-top: 1px solid rgba(212, 226, 237, 0.6);
				color: #A6B1BA;
				font-size: 24rpx;
				padding: 0 24rpx;
				span{
					margin-right: 16rpx;
				}
			}
			.status{
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 16rpx;
				height: 40rpx;
				border-radius: 0px 16rpx 0px 16rpx;
				font-size: 20rpx;
				right: 0;
				top: 0;
				&.primary{
					background: rgba(19, 120, 255, 0.1);
					color: #1378FF;
				}
				&.success{
					background: rgba(39, 183, 16, 0.1);
					color: #27B710;
				}
				&.error{
					background: rgba(243, 43, 43, 0.1);
					color: #F32B2B;
				}
				&.warning{
					background: rgba(255, 153, 0,0.1);
					color: #ff9900;
				}
				&.info{
					background: rgba(144, 147, 153,0.1);
					color: #909399;
				}
			}
		}
	}
</style>
